<template>
  <el-form class="login-form"
           status-icon
           :rules="loginRules"
           ref="loginFromRef"
           :model="loginForm"
           label-width="0">
    <el-form-item prop="username">
      <el-input @keyup.enter="handleLogin(loginFromRef)"
                v-model="loginForm.username"
                auto-complete="off"
                :placeholder="$t('login.username')">
        <template #prefix>
          <i class="icon-yonghu"></i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input @keyup.enter="handleLogin(loginFromRef)"
                :type="passwordType"
                v-model="loginForm.password"
                auto-complete="off"
                :placeholder="$t('login.password')">
        <template #suffix>
          <i class="el-icon-view el-input__icon"
             @click="showPassword"></i>
        </template>
        <template #prefix>
          <i class="icon-mima"></i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-input @keyup.enter="handleLogin(loginFromRef)"
                :maxlength="code.len"
                v-model="loginForm.code"
                auto-complete="off"
                :placeholder="$t('login.code')">
        <template #prefix>
          <i class="icon-yanzhengma"></i>
        </template>
        <template #append>
          <div class="login-code">
            <span class="login-code-img"
                  @click="refreshCode"
                  v-if="code.type == 'text'">{{ code.value }}</span>
            <img :src="code.src"
                 class="login-code-img"
                 @click="refreshCode"
                 v-else/>
            <!-- <i class="icon-shuaxin login-code-icon" @click="refreshCode"></i> -->
          </div>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary"
                 @click.prevent="handleLogin(loginFromRef)"
                 class="login-submit">{{ $t('login.submit') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup name="userlogin">
import {randomLenNum} from "utils/util";
import {useStore} from "vuex";
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";


const store = useStore()
const loginFromRef = ref()
const router = useRouter()

const loginForm = reactive({
  username: "",
  password: "",
  code: "",
  redomStr: ""
})
const code = reactive({
  src: "",
  value: "",
  len: 4,
  type: "img"
})
const loginRules = reactive({
  username: [
    {required: true, message: "请输入用户名", trigger: "blur"}
  ],
  password: [
    {required: true, message: "请输入密码", trigger: "blur"},
    {min: 6, message: "密码长度最少为6位", trigger: "blur"}
  ],
  code: [
    {required: true, message: "请输入验证码", trigger: "blur"},
    {min: 4, max: 4, message: "验证码长度为4位", trigger: "blur"},
  ]
})
const passwordType = ref("password")


const getVerification = () => {
  code.src = `/portal/mask?1=` + randomLenNum(code.len)
}

const refreshCode = () => {
  if (code.type == 'text') {
    code.value = randomLenNum(this.code.len)
  } else {
    getVerification()
  }
}

refreshCode();

const handleLogin = (formEl) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      store.dispatch("LoginByUsername", loginForm).then(() => {
        store.dispatch('GetUserInfo').then(() => {
          router.push(store.getters.tagWel);
        })
      }).catch(()=>{
        getVerification()
      })
    }
  })
}

</script>
